<%@ page import="list.model.Contact" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>
    .modify {
        border: 0;
        border-radius: 10px;
        background-color: transparent;
    }

    .addon {
        top: 0;
    }
</style>
<table class="table table-hover table-bordered table-striped">
    <thead>
    <tr>
        <th class="tab-name">姓名</th>
        <th class="tab-email">邮箱</th>
        <th class="tab-add">地址</th>
        <th class="tab-tel">号码</th>
        <th class="edit"></th>
    </tr>
    </thead>
    <tbody class="js-tab">
    <%
        if (null != user.getContacts(tag) && 0 < user.getContacts(tag).length) {
            for (Contact contact : user.getContacts(tag)) {
    %>
    <tr>
        <input type="hidden" name="id" value="<%=contact.getContact_id()%>">
        <td class="tab-name">
            <input class="modify" name="name" type="text" value="<%=contact.getName()%>" readonly>
        </td>
        <td class="tab-email">
            <input class="modify" name="email" type="text" value="<%=contact.getEmail()%>" readonly>
        </td>
        <td class="tab-add">
            <input class="modify" name="address" type="text" value="<%=contact.getAddress()%>" readonly>
        </td>
        <td class="tab-tel dropdown">
            <%@ include file="phone.jsp" %>
        </td>
        <td>
            <a href="module/route.jsp?opt=delete&key=contact&tag_id=<%=tag%>&id=<%=contact.getContact_id()%>">
                <button class="btn btn-danger delete" type="button">删除</button>
            </a>
        </td>
    </tr>
    <%
            }
        }
    %>
    </tbody>
</table>

<script>
    $(function () {
        //在线修改功能
        $(".modify").dblclick(function () {
            $(this).removeAttr("readonly");
        });
        $(".modify").change(function () {
            $(this).attr("readonly", "readonly");
            const user_id = $("#user_id").val();
            $.get("module/route.jsp", {
                "id": $(this).parent().siblings("input[name='id']").val(),
                "pro": $(this).attr("name"),
                "val": $(this).val(),
                "tag":<%=tag%>
            }, function (response) {
                const result = response.trim();
                if (result) {
                    alert(result);
                }
            });
        });
    });
</script>